<!-- 订单详情 -->
<template>
  <div class="dashboard-container edit-order">
    <div class="app-container">
      <el-card
        shadow="never"
        class="order-box"
      >
        <el-row
          :gutter="20"
          justify="center"
        >
          <el-col :span="6">
            订单编号：
            <label>{{ dataList.id }}</label>
          </el-col>
          <el-col :span="6">
            运单编号：
            <label>{{ dataList.memberId }}</label>
          </el-col>
          <el-col :span="6">
            <span>下单时间：</span>
            <label>{{ dataList.createTime }}</label>
          </el-col>
          <el-col :span="6">
            <span class="span1">订单状态：</span>
            <label>{{ orderStatus(dataList.status) }}</label>
          </el-col>
          <el-col
            :span="6"
            class="yjddrq"
          >
            <span class="sp"> 到达日期：</span>
            <label class="hhh">{{ dataList.estimatedArrivalTime }}</label>
          </el-col>
        </el-row>
      </el-card>
      <el-collapse
        v-model="activeNames"
        style="margin-top: 20px; border: none;"
      >
        <el-collapse-item name="2">
          <template slot="title">
            <div class="collapse-detail">基本信息</div>
          </template>
          <div class="block">
            <el-timeline>
              <div class="line"></div>
              <div
                class="pake-info"
                style="margin-top: 10px"
              >
                <img
                  class="img-info1"
                  src="../../assets/fahuo.png"
                  alt=""
                />
                <span>发货方</span>
              </div>
              <div style="margin-top: 0px; margin-left: 40px; display: flex">
                <div style="">
                  <div class="demo-input-suffix base-info">
                    发货方姓名：
                    <span>{{ dataList.receiverName }}</span>
                  </div>

                  <div class="demo-input-suffix base-info">
                    发货方地址：
                    <!-- <span>{{
                      dataList.receiverProvince.name +
                        dataList.receiverCity.name +
                        dataList.receiverCounty.name
                    }}</span> -->
                    <span>{{ dataList.receiverProvince && dataList.receiverProvince.name || '' }}</span>
                    <span>{{ dataList.receiverCity && dataList.receiverCity.name || '' }}</span>
                    <span>{{ dataList.receiverCounty && dataList.receiverCounty.name || '' }}</span>

                  </div>
                </div>
                <div style="margin-left: 174px">
                  <div class="demo-input-suffix base-info">
                    发货方电话：

                    <span>{{ dataList.receiverPhone }}</span>
                  </div>
                  <div class="demo-input-suffix base-info">
                    &nbsp;&nbsp;&nbsp;详细地址：

                    <span>{{ dataList.receiverAddress }}</span>
                  </div>
                </div>
              </div>
              <div
                class="pake-info"
                style="margin-top: 20px"
              >
                <img
                  class="img-info2"
                  src="../../assets/shouhuo.png"
                  alt=""
                />
                <span
                  style="display: inline-block; margin-top: 6px"
                >收货方</span>
              </div>
              <div style="margin-top: 0px; margin-left: 40px; display: flex">
                <div style="">
                  <div class="demo-input-suffix base-info">
                    收货方姓名：
                    <span>{{ dataList.senderName }}</span>
                  </div>

                  <div class="demo-input-suffix base-info">
                    收货方地址：
                    <!-- <span>{{
                      dataList.senderProvince.name +
                        dataList.senderCity.name +
                        dataList.senderCounty.name
                    }}</span> -->
                    <span>{{ dataList.senderProvince&&dataList.senderProvince.name || '' }}</span>
                    <span>{{ dataList.senderCity&&dataList.senderCity.name || '' }}</span>
                    <span>{{ dataList.senderCounty&&dataList.senderCounty.name || '' }}</span>
                  </div>
                </div>
                <div style="margin-left: 174px">
                  <div class="demo-input-suffix base-info">
                    收货方电话：
                    <span>{{ dataList.senderPhone }}</span>
                  </div>
                  <div class="demo-input-suffix base-info">
                    &nbsp;&nbsp;&nbsp;详细地址：
                    <span>{{ dataList.senderAddress }}</span>
                  </div>
                </div>
              </div>
            </el-timeline>
          </div>
        </el-collapse-item>
      </el-collapse>
      <!-- 订单跟踪 -->
      <el-collapse
        v-if="$route.query.status!=='23000'"
        v-model="activeNames"
      >
        <el-collapse-item
          title="订单跟踪"
          name="8"
        >
        </el-collapse-item>
      <!-- <empty
            src="@/assets/empty.png"
            desc="这里空空如也~"
          ></empty> -->
      </el-collapse>
      <!-- 订单轨迹 -->
      <el-collapse
        v-if="$route.query.status!=='23000'"
        v-model="activeNames"
      >
        <el-collapse-item
          title="订单轨迹"
          name="9"
        >
          <showOrderMaps
            :title-info="titleInfo"
            :form-base="formBase"
          ></showOrderMaps>
        </el-collapse-item>
        <!-- 要在这个里面写 -->
        <!-- <empty
            src="@/assets/empty.png"
            desc="这里空空如也~"
          ></empty> -->
      </el-collapse>
      <!-- 取件信息  -->
      <el-collapse
        v-model="activeNames"
      >
        <el-collapse-item
          title="取件信息"
          name="3"
        >
          <el-row :gutter="20">
            <el-form>
              <el-col :span="6">
                <span class="adi1">
                  所在网点：
                </span>
                <label>{{ dataList.taskPickup&&dataList.taskPickup.agency.name ||'' }}</label>
              </el-col>
              <el-col :span="6">
                <span class="adi1">
                  取件类型：
                </span>
                <label>
                  {{ projectionType(dataList.pickupType) }}
                </label>
              </el-col>
              <el-col :span="6">
                <span class="adi1">
                  作业状态：
                </span>
                <label>{{ assignment(dataList.taskPickup&&dataList.taskPickup.status ||'') }}</label>
              </el-col>
              <el-col :span="6">
                <span class="adi1">
                  取件快递员：
                </span>
                <label>{{ dataList.taskPickup&&dataList.taskPickup.courier.name || '' }}</label>
              </el-col>
            </el-form>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6">
              <span class="adi1">
                快递员电话：
                <label>{{ dataList.taskPickup&&dataList.taskPickup.courier.mobile ||'' }}</label>
              </span>
            </el-col>
            <el-col :span="6">
              <span class="adi1">
                预计取件时间：
              </span>
              <label>{{ dataList.estimatedStartTime }}</label>
            </el-col>
            <el-col :span="6">
              <span class="adi1">
                取件完成时间：
              </span>
              <label>{{ dataList.estimatedEndTime }}</label>
            </el-col>
          </el-row>
        </el-collapse-item>
      <!-- <empty
            src="@/assets/empty.png"
            desc="这里空空如也~"
          ></empty> -->
      </el-collapse>
      <!-- 派件信息  -->
      <el-collapse
        v-if="$route.query.status!=='23000'"
        v-model="activeNames"
      >
        <el-collapse-item
          title="派件信息"
          name="10"
        >
          <el-row :gutter="20">
            <el-form>
              <el-col :span="6">
                <span class="adi1">
                  所在网点：
                </span>
                <label>{{ dataList.taskDispatch&&dataList.taskDispatch.agency.name ||'' }}</label>
              </el-col>

              <el-col :span="6">
                <span class="adi1">
                  作业状态：
                </span>
                <label>{{ assignment(dataList.taskDispatch&&dataList.taskDispatch.status ||'') }}</label>
              </el-col>
              <el-col :span="6">
                <span class="adi1">
                  派送快递员：
                </span>
                <label>{{ dataList.taskDispatch&&dataList.taskDispatch.courier.name || '' }}</label>
              </el-col>
            </el-form>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6">
              <span class="adi1">
                快递员电话：
                <label>{{ dataList.taskDispatch&&dataList.taskDispatch.courier.mobile ||'' }}</label>
              </span>
            </el-col>
            <el-col :span="6">
              <span class="adi1">
                预计派送时间：
              </span>
              <label>{{ dataList.taskDispatch&&dataList.taskDispatch.estimatedStartTime ||'' }}</label>
            </el-col>
            <el-col :span="6">
              <span class="adi1">
                派件完成时间：
              </span>
              <label>{{ dataList.taskDispatch&&dataList.taskDispatch.estimatedEndTime ||'' }}</label>
            </el-col>
          </el-row>
        </el-collapse-item>
      <!-- <empty
            src="@/assets/empty.png"
            desc="这里空空如也~"
          ></empty> -->
      </el-collapse>
      <!-- 费用信息 -->
      <el-collapse
        v-model="activeNames"
      >
        <el-collapse-item
          title="费用信息"
          name="4"
        >
          <el-row
            type="flex"
            class="row-bg"
            justify="space-around"
          >
            <el-col :span="6">
              <span class="adi1">
                运费：
              </span>
              <span class="mani">12</span>
              <label>元</label>
            </el-col>
            <el-col :span="6">
              <span class="adi1">
                支付方式：
              </span>
              <label>
                {{ moneyType(dataList.paymentMethod) }}
              </label>
            </el-col>
            <el-col :span="6">
              <span class="adi1">
                付款状态：
              </span>
              <label>
                {{ moneysType(dataList.paymentStatus) }}
              </label>
            </el-col>
          </el-row>
        </el-collapse-item>
      <!-- <empty
            src="@/assets/empty.png"
            desc="这里空空如也~"
          ></empty> -->
      </el-collapse>
      <!-- 货品信息 -->
      <el-collapse
        v-model="activeNames"
        class="customer-table-box"
        style="margin-top: 20px; margin-bottom: 40px"
      >
        <el-collapse-item name="5">
          <template slot="title">
            <div class="collapse-detail">货品信息</div>
          </template>
          <div style="box-sizing: border-box">
            <el-table
              :data="dataList.orderCargoDTOS"
              style="width: 100%"
              stripe
              :header-cell-style="{ background: 'rgba(250,252,255,1)' }"
            >
              <div
                v-show="
                  (!dataList.orderCargoDTOS || dataList.orderCargoDTOS.length <= 0)
                "
                slot="empty"
              >
                <img
                  src="@/icons/pic-kong.png"
                  alt="img"
                  style="margin-top: 20px; width: 25%; height: 25%"
                />
                <p style="margin-top: -10px; padding-bottom: 10px">
                  这里空空如也
                </p>
              </div>
              <el-table-column
                label="序号"
                type="index"
                align="left"
                width="60"
              />
              <el-table-column label="货品名称">
                <template slot-scope="scope">
                  <span>{{ scope.row.name || '--' }}</span>
                </template>
              </el-table-column>
              <el-table-column label="货品类型">
                <template slot-scope="scope">
                  <span>{{
                    scope.row.goodsType === null
                      ? '--'
                      : scope.row.goodsType.name
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="重量（千克）">
                <template slot-scope="scope">
                  <span>{{ scope.row.totalWeight || '--' }}</span>
                </template>
              </el-table-column>
              <el-table-column label="体积（立方）">
                <template slot-scope="scope">
                  <span>{{ scope.row.totalVolume || '--' }}</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>
<script>
import { orderDetailAPI } from '@/api/order'
import showOrderMaps from './components/show-order-maps'
export default {
  components: {
    showOrderMaps
  },
  data () {
    return {
      dataId: '',
      dataList: [],
      activeNames: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
      formBase: {},
      titleInfo: { text: '订单轨迹' }
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    // 付款状态
    moneysType(type) {
      const MAP = {
        1: '未付',
        2: '已付'
      }
      return MAP[type]
    },
    // 支付类型
    moneyType(type) {
      const MAP = {
        1: '预结',
        2: '到付'
      }
      return MAP[type]
    },
    // 作业类型
    assignment(type) {
      const MAP = {
        1: '新任务',
        2: '已完成',
        3: '已取消'
      }
      return MAP[type]
    },
    // 取件类型
    projectionType (pickupType) {
      const MAP = {
        1: '网点自',
        2: '上门取件'
      }
      return MAP[pickupType]
    },
    async getList() {
      this.dataId = this.$route.query.orderId
      const { data } = await orderDetailAPI(this.dataId)
      // const res = await getOrderTrackAPI(this.dataId)
      this.dataList = data
      // console.log(this.dataList)
    },
    orderStatus (type) {
      const MAP = {
        22000: '已关闭',
        23000: '代取件',
        23001: '已取件',
        23002: '网点自行邮寄'
      }
      return MAP[type]
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.transport-box {
  /deep/ .el-collapse-item__content {
    overflow-x: auto;
  }}
.transport-box {
    .el-collapse-item__content {
      padding-bottom: 0px !important;
    }
  }

.yjddrq .sp {
  color: #000;
  font-size: 16px;
}
.span1 {
  color: #818693;
}
.el-col{
  color: #818693;
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
}
label {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
}
.label {
  color: #818693;
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
}
@import './index.scss';
.adi1 {
  color: #000;
}
.mani {
  font-size:20px;
  color: #ffb302;
}
</style>

